/** * @description : 特殊区域列表 * @descriptionDetail : 特殊区域列表 * @copyright : 浙江烟草 * @author : mc * @create : 2022-12-05 14:05:49 */
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar
      :is-white="false" :title="navTitle" :custom-back="goBack"
      style="z-index: 99999"
    ></theme-navbar>
    <!-- #endif -->
    <view class="nolicence-search-lay" :style="{'top': isHideNav ? 0 : '44px'}">
      <u-search
        shape="round"
        :clearabled="true"
        :showAction="true"
        actionText="确定"
        :animation="true"
        placeholder="区域名称/类型名称/负责人/电话/地址"
        v-model="keyWord"
        @custom="toSearchList"
      ></u-search>
    </view>
    <view class="content">
      <me-table
        :i="0" :index="0" :load-data="loadData"
        :top="getListViewTop()" :init-load="false" ref="mescrollItem0"
        :height="getListViewHeight()"
      >
        <view slot-scope="d" class="list-item-root list-lay">
          <list-item-special-area :itemInfo="d.data"></list-item-special-area>
        </view>
      </me-table>
    </view>
  </view>
</template>

<script>
import MescrollMoreMixin from '@/components/mescroll-uni/mixins/mescroll-more.js';
import meTable from '@/components/me-table.vue';
import ListItemSpecialArea from './components/listItemSpecialArea.vue';
import queryService from '@/service/query/query.service';
import { SET_MAP_LAT_LON, } from '@/config/setting.config.js';
export default {
  components: {
    meTable,
    ListItemSpecialArea,
  },
  mixins: [MescrollMoreMixin,],
  data() {
    return {
      keyWord: '',
      user: this.$storage.get(this.$rp.common.USER),
      longLatStatus: false,
      firstNoLoad: false,
    };
  },
  onLoad() {},
  methods: {
    getListViewHeight() {
      let p = this.$u.sys().windowHeight - 44 + 5 - uni.upx2px(10) - this.$u.sys().statusBarHeight + 'px';
      // #ifdef H5-DINGDING || H5-WECHAT
      p = this.$u.sys().windowHeight - uni.upx2px(10) + 5 - this.$u.sys().statusBarHeight + 'px';
      // #endif
      return p;
    },
    getListViewTop() {
      let p = uni.upx2px(64) + uni.upx2px(10) + 20;
      return p + 'px';
    },
    toSearchList(e) {
      this.getMescroll(0).triggerDownScroll();
    },
    // 用的工作待办接口筛选数据，不用做分页查询，默认多查一批数据出来
    loadData(page) {
      this.longLatit();
      let self = this;
      let param = {
        page: page.num,
        limit: page.size,
        keyWord: this.keyWord,
      };
      return new Promise((resolve, reject) => {
        // if (!this.firstNoLoad) {
        // 	this.firstNoLoad = true;
        // 	resolve({
        // 		count: 0,
        // 		data: [],
        // 	});
        // 	return;
        // }
        this.longLatit().then(() => {
          param.latitudeLeft = self.latitude;
          param.longitudeLeft = self.longitude;
          queryService
            .findAreaListPage(param)
            .then((res) => {
              resolve({
                count: res.count,
                data: [...res.data,],
              });
            })
            .catch((e) => {
              console.log(e);
              resolve({
                count: 0,
                data: [],
              });
            });
        });
      });
    },
    updateBackState(param) {},
    longLatit() {
      let self = this;
      return new Promise((resolve) => {
        if (this.$deviceApi.geolocation) {
          this.$deviceApi.geolocation().then((res) => {
            self.longitude = res.longitude;
            self.latitude = res.latitude;
            resolve();
          });
        } else {
          self.longitude = SET_MAP_LAT_LON[0];
          self.latitude = SET_MAP_LAT_LON[1];
          resolve();
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
	@import '@/style/common/rightMenu.scss';
	.content {
		background-color: #f3f4f5;
	}
	.page {
		padding: 0;
	}
	.nolicence-search-lay {
		background-color: #fff;
		position: fixed;
		// #ifndef H5-DINGDING
		top: 44px;
		// #endif
		// #ifdef H5-DINGDING
		top: 0px;
		// #endif
		z-index: 99;
		width: 100%;
		padding: $cm-search-padding-row $cm-search-padding-column;
	}
	.key-search {
		width: 100%;
		margin: auto;
		padding-left: 2.5%;
		padding-right: 2.5%;
		line-height: 48px;
	}
	.list-item-root {
		border-bottom: 1px solid $u-border-color;
	}
	.list-lay {
		margin: 10px;
		background-color: #fff;
		padding: 10px $cm-conent-padding-column $cm-content-paddng-row;
		border-radius: 15px;
	}
</style>
